<template>
  <div class="city">
    <App-header>
      <img slot="title" @click="prev" src="../assets/上一步.png" alt="">
      <p slot="city">搜索地址</p>
    </App-header>
    <form class="cityFrom" action="get" @submit.prevent="onSubmit">
      <div class="searchCity">
        <input type="search" v-model="search" required placeholder="输入学校、商务楼、地址" class="citySearch__item">
        <input @click="subBtn" type="submit" name="subBtn" value="提交" class="citySubmit">
      </div>
    </form>
    <div class="searchList">
      <div @click="$router.push({ name: 'AddAddress', query: { name: item.name, address: item.address } })" class="searchList__item" v-for="(item, index) in searchArr" :key="index">
        <h4>{{item.name}}</h4>
        <p>{{item.address}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import AppHeader from './AppHeader.vue'
import {message} from './simpleComponents/co-message'
// import {state} from '../store'

export default {
  name: 'SearchAddress',
  data () {
    return {
      search: '',
      searchArr: []
    }
  },
  methods: {
    // 防止提交按钮的默认事件
    onSubmit () {
      return false
    },
    // 返回上一页
    prev () {
      this.$router.go(-1)
    },
    SearchList () {},
    subBtn () {
      if (this.search.length === 0) {
        message({
          message: '请输入搜索内容',
          type: 'error'
        })
      } else {
        this.$http.searchCity({
          type: 'search',
          city_id: 1,
          keyword: this.search
        }).then(res => {
          window.console.log(res.data)
          this.searchArr = res.data
        }).catch(err => {
          window.console.log(err)
        })
      }
    }
  },
  components: { AppHeader },
  computed: {
  },
  created () {
  }
}
</script>

<style scoped lang="scss">
  *{
    margin: 0px;
    padding: 0px;
    text-decoration: none;
  }
  .city{
    width: 100%;
    height: 100%;
    background-color: #fff;
    .cityFrom{
      width: 100%;
      height: 115px;
      border-bottom: 1px solid #e4e4e4;
      background-color: #fff;
      .searchCity{
        width: 90%;
        height: 115px;
        margin: 0px auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .citySearch__item{
          width: 75%;
          height: 64px;
          padding: 10px;
          background-color: #f5f5f5;
          border: 1px solid #e4e4e4;
          border-radius: 4px;
          font-size: 28px;
          outline: none;
        }
        .citySubmit{
          width: 20%;
          height: 66px;
          list-style: none;
          font-style: normal;
          text-decoration: none;
          border: none;
          font-size: 31px;
          border-radius: 4px;
          color: #fff;
          background-color: #3190e8;
        }
      }
    }
    .searchList{
      width: 100%;
      background-color: #fff;
      .searchList__item{
        width: 100%;
        height: 110px;
        overflow: hidden;
        padding: 15px 0px 0px;
        border-bottom: 1px solid #e4e4e4;
        h4{
          width: 90%;
          height: 40px;
          margin: 0px auto 25px;
          font-size: 30px;
          color: #333;
          font-weight: unset;
        }
        p{
          width: 90%;
          height: 30px;
          overflow: hidden;
          margin: 0px auto 25px;
          font-size: 25px;
          color: #9d9d9d;
        }
      }
    }
  }
</style>
